<template>
  <div class="home">
    <p class="home-title">尊敬的用户，您获得的总权益为</p>
    <p class="home-totals">{{total}}</p>
    <!-- <img class="home-images" src="../../assets/img/38.jpg"/> -->
    <div class="home-images"></div>
    <button class="home-btn" @click="showView = !showView">立即兑换</button>
    <button class="home-btn-detail" @click="getViews()">权益明细</button>
    <van-actionsheet style="height:360px;" v-model="showView" title="请选择兑换方式">
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell title="油卡充值卡" clickable @click="radio = '0'">
						<van-radio name="0" />
					</van-cell>
					<van-cell title="微信提现" clickable @click="radio = '1'">
						<van-radio name="1" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
			<van-cell-group>
				<div v-if="radio === '0'" class="wx">
					<span>实际到账：</span>
					<p>油卡充值卡等额发放</p>
          <p class="tips">目前提供中石化油卡充值卡服务，中石油油卡充值卡服务正在飞奔而来，敬请期待！</p>
				</div>
				<div v-if="radio === '1'" class="wx orange">
					<span>扣费规则：</span>
					<!-- <p>手续费包含95折油卡折扣费</p> -->
          <p>微信提现手续费为95折</p>
				</div>
			</van-cell-group>
			<button @click="exchangeBtn()" class="exchangeBt">确认兑换</button>
		</van-actionsheet>
  </div>
</template>
<script>
import {getTotals} from '../../api/login.js'
import {
  getList,
  exchange,
  getWeChatCash,
  getWeTakecash,
  getPay
} from "../../api/rightsInterests.js";
export default {
  name: 'oil-home',
  data () {
    return {
      total: 0,
      showView: false,
      radio: ''
    }
  },
  created () {
    // alert(document.documentElement.clientHeight);
    sessionStorage.removeItem('totalRight');
    this.getTotals();
  },
  methods: {
    getTotals () {
      getTotals().then(res => {
        sessionStorage.setItem('status', 0);
        this.$store.commit('exchangeStatus', 0);
        if (res.data) {
          this.total = res.data.interestsCount;
        } else {
          this.total = 0;
        }
        sessionStorage.setItem('totalRight', this.total);
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
    },
    getViews () {
      this.$router.push({name: 'rightList'})
    },
    exchangeBtn () {
      if (!this.total || this.total == 0) {
        this.$toast.fail('很抱歉，您的权益不足，无法兑换');
      } else {
        if (this.radio === '1') {
          // wxcash
          this.$router.push({name: 'wxcash'});
        }else if(this.radio === '0') {
          // yk
          this.$router.push({name: 'ykcash'});
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home{
  padding: 50px 36px;
  width: calc( 100% - 72px );
  height:100%;
  background: #fafafa;
  position: fixed;
  // .van-actionsheet {
  //   height: 360px;
  // }
  .exchangeBt {
    background: #FF8A41;
    color: #fff;
    width: 90%;
    border: none;
    position: fixed;
    bottom: 30px;
    margin-left: 5%;
    height: 45px;
    line-height: 45px;
    border-radius:25px;
    font-size: 16px;
  }
  .wx {
    padding: 10px 15px;
    span {
      font-size: 12px;
      color: #888888;
    }
    p {
      font-size: 14px;
      color: #333333;
    }
    .tips{
      margin-top: 6px;
    }
  }
  .home-title{
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
    font-family:PingFang SC;
    font-weight:300;
    line-height:25px;
    color:#F56B5F;
    opacity:1;
  }
  .home-totals{
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 45px;
    font-size:36px;
    font-family:PingFang SC;
    font-weight:normal;
    line-height:50px;
    color:#F56B5F;
    opacity:1;
  }
  .home-images{
    width: 100%;
    margin-bottom: 38px;
    height: 130px;
    background-image: url(../../assets/img/38.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .home-btn{
    width:100%;
    height:49px;
    background:#FF8A41;
    opacity:1;
    border-radius:25px;
    color: #ffffff;
    font-size: 16px;
    border: 1px solid #FF8A41;
  }
  .home-btn-detail{
    width:100%;
    height:49px;
    opacity:1;
    border-radius:25px;
    color: #FF8A41;
    background: #fafafa;
    font-size: 16px;
    border: 1px solid #EDEDED ;
    margin-top: 18px;
  }
  .home-btn-detail:active {
    background-color: #e8e8e8;
  }
}
.orange {
  color: #FF8A41;
  span{color: #FF8A41 !important;}
  p{color: #FF8A41 !important;}
}
.van-cell{
      padding: 15px !important;
}
</style>
